<template>
  <a-layout-header class="header">
    <div class="logo" />
    <div style="float:right; color:white;">
      {{member.mobile}}
      <router-link to="/login">退出登录</router-link>
    </div>
    <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined /> 欢迎
        </router-link>
      </a-menu-item>
      <a-menu-item key="/passenger">
        <router-link to="/passenger">
          <coffee-outlined /> 乘车人管理
        </router-link>
      </a-menu-item>
    </a-menu>

  </a-layout-header>
</template>

<script>
import { defineComponent, ref } from 'vue';
import store from "@/store";
import {watch} from "vue";
import router from "@/router";

export default defineComponent({
  name: "the-header-view",
  setup() {
    let member = store.state.member;
    const selectedKeys = ref([]);

    watch(()=>router.currentRoute.value.path, (newValue)=>{
      console.log('watch',newValue);
      selectedKeys.value = [];
      selectedKeys.value.push(newValue);
    }, {immediate: true});

    return{
      member,
      selectedKeys
    };
  },
});
</script>

<style scoped>

</style>